import { message } from 'ant-design-vue';
import { themeStore } from '@/stores/themeStore';
import { computed } from 'vue';
import { getDarkColor, getLightColor } from '@/utils/theme';

export const useTheme = () => {
  const themeS = themeStore();
  const themeConfig = computed(() => themeS.themeConfig);

  // 修改主题颜色
  const changePrimary = (val?: string) => {
    if (!val) {
      val = themeConfig.value.primary;
      message.success(`主题已重置为${themeConfig.value.primary}`);
    }
    themeS.setThemeConfig({ ...themeConfig.value, primary: val });
    // 为了兼容暗黑模式下主题颜色正常,下方计算主题颜色,由深到浅的具体颜色
    document.documentElement.style.setProperty('--ant-primary-color', themeConfig.value.primary);
    document.documentElement.style.setProperty(
      '--ant-primary-color-active',
      themeConfig.value.isDark
        ? `${getLightColor(themeConfig.value.primary, 0.2)}`
        : `${getDarkColor(themeConfig.value.primary, 0.3)}`,
    );
    document.documentElement.style.setProperty(
      '--ant-primary-color-hover',
      `${getLightColor(themeConfig.value.primary, 0.2)}`,
    );
    // 颜色加深或变浅
    for (let i = 1; i <= 9; i++) {
      console.log(themeConfig.value.primary);

      document.documentElement.style.setProperty(
        `--ant-primary-${10 - i}`,
        themeConfig.value.isDark
          ? `${getDarkColor(themeConfig.value.primary, i / 10)}`
          : `${getLightColor(themeConfig.value.primary, i / 10)}`,
      );
    }
  };
  return { changePrimary };
};
